import classNames from 'classnames'
import type { FC } from 'react'
import contentStyle from '../../index.module.scss'
import styles from './index.module.scss'
import Loading from '@/app/components/Loading'

interface IndexProps {
  onCancel: () => void
  onConfirm: () => void
  onDelete?: (() => void) | boolean
  loading: boolean
  hasChanged?: boolean
}

const Index: FC<IndexProps> = ({ onCancel, onConfirm, onDelete, loading, hasChanged }) => {
  return (<div className={classNames(styles.bottomBtn, contentStyle.card)}>
    {
      onDelete
        ? <div className={styles.delBtn} onClick={() => {
          if (typeof onDelete === 'function') {
            onDelete()
          }
        }}>
          <svg xmlns="http://www.w3.org/2000/svg" width={14} fill="none" viewBox="0 0 17 17"><path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M13.38 7.258s-.361 4.49-.571 6.382c-.1.903-.658 1.432-1.572 1.449-1.74.031-3.481.033-5.22-.003-.88-.018-1.428-.554-1.526-1.442-.211-1.908-.571-6.386-.571-6.386M14.302 5.106H2.997M12.124 5.106c-.523 0-.974-.37-1.076-.883l-.162-.81a.853.853 0 00-.825-.633H7.24a.853.853 0 00-.825.632l-.162.811a1.099 1.099 0 01-1.076.883"></path></svg>
        删除
        </div>
        : <div></div>
    }

    <div className={styles.btns}>
      <div className={styles.cancel} onClick={onCancel}>取消</div>
      <div className={classNames(styles.save)} onClick={() => {
        if (loading) {
          return
        }
        onConfirm()
      }}>
        {
          loading ? <Loading style={{ width: '20px' }} /> : null
        }
        保存</div>
    </div>

  </div>)
}

export default Index
